<template>
  <div class="ashboard-container">
    <div class="app-container">
      <el-card>
        <Breadcrum v-if="subName.id"/>
        <el-divider v-if="subName.id"></el-divider>
        <el-form :model="page" :inline="true" label-width="80px" size="small">
          <el-row>
            <el-col :span="20">
              <el-form-item label="目录名称" prop="directoryName">
                <el-input v-model.trim="page.directoryName" />
              </el-form-item>
              <el-form-item label="状态" prop="state" placeholder="请选择">
                <el-select v-model="page.state">
                  <el-option
                    v-for="item in optionform"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="clearSubject">清除</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="list"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button
                  type="text"
                  icon="el-icon-arrow-left"
                  v-if="subName.id"
                  @click="$router.go(-1)"
                  >返回学科</el-button
                >
                <el-button type="success" icon="el-icon-edit" @click="addbtn"
                  >新增目录</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <page-tools :show-before="true">
          <span slot="before">数据一共{{ page.total }}条</span>
        </page-tools>
        <!-- 表格部分 -->

        <el-table :data="list1">
          <el-table-column label="序号" type="index" />
          <el-table-column label="所属学科" prop="subjectName" />
          <el-table-column label="目录名称" prop="directoryName" />
          <el-table-column label="创建者" prop="username" />
          <el-table-column label="创建日期" prop="addDate" width="160">
            <template v-slot="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="面试题数量" prop="totals" />
          <el-table-column label="状态" prop="state">
            <template slot-scope="scope">
              <span v-if="scope.row.state === 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="onstop(scope.row)">{{
                scope.row.state === 1 ? "启用" : "禁用"
              }}</el-button>
              <el-button
                type="text"
                v-if="scope.row.state === 1"
                @click="handel(scope.row)"
                >修改</el-button
              >
              <el-button type="text" v-else disabled @click="handel(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                v-if="scope.row.state === 1"
                @click="remove(scope.row.id)"
                >删除</el-button
              >
              <el-button
                type="text"
                v-else
                disabled
                @click="remove(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
            background
            :current-page="page.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.size"
            layout="prev, pager, next, sizes, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
      <!-- 新增/修改目录弹层 -->
      <el-dialog
        :title="`${flag ? '新增' : '修改'}目录`"
        :visible.sync="subjectShowDialog"
        width="26%"
      >
        <el-form :model="addForm" ref="ruleForms" :rules="addFormRules">
          <el-form-item label="所属学科">
            <el-select
              v-model="addForm.subjectID"
              style="width:75%"
              size="small"
            >
              <el-option
                v-for="item in list2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="directoryName">
            <el-input
              v-model="addForm.directoryName"
              style="width:70%"
              size="small"
            />
          </el-form-item>
        </el-form>
        <template v-slot:footer>
          <el-row type="flex" justify="end">
            <el-col :span="12">
              <el-button>取消</el-button>
              <el-button type="primary" @click="btnOK">确认</el-button>
            </el-col>
          </el-row>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import PageTools from "@/components/PageTools";
import { list, add, update, remove, changeState } from "@/api/hmmm/directorys";
import Breadcrum from "../components/directorys-add";
import { simple } from "@/api/hmmm/subjects";
export default {
  components: {
    PageTools,
    Breadcrum
  },
  // props:{
  //    query
  // },
  data() {
    return {
      // 路由参数
      subName: this.$route.query,
      optionform: [
        { value: "1", label: "启用" },
        { value: "0", label: "禁用" }
      ],
      list1: [],
      // 学科列表数据
      list2: [],
      page: {
        page: 1,
        size: 10,
        directoryName: "",
        state: null,
        total: 0
      },
      flag: true,
      // 控制弹出层
      subjectShowDialog: false,
      // 添加目录的表单数据
      addForm: {
        subjectID: null,
        directoryName: ""
      },
      // 添加表单的验证规则对象
      addFormRules: {
        directoryName: [
          { required: true, message: "请输入目录名称", trigger: "blur" }
        ]
      },
      // 修改目录
      ruleForm: {
        id: "",
        subjectID: null,
        directoryName: ""
      },
      rules: {
        directoryName: [
          { required: true, message: "请输入目录名称", trigger: "blur" },
          { min: 1, max: 6, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    if (this.subName) {
      this.created1();
    } else {
      this.list();
    }
    // console.log(this.subName);
  },
  methods: {
    // 跳转接口
    async created1() {
      const { data } = await list({
        subjectName: this.subName.directoryName,
        subjectID: this.subName.id
      });
      // console.log(data);
      this.list1 = data.items;
      this.page.total = data.counts;
    },
    async list() {
      const { data } = await list(this.page);
      // console.log(data);
      this.list1 = data.items;
      this.page.total = data.counts;
    },
    // 控制分页
    handleSizeChange(val) {
      this.page.size = val;
      this.list();
    },
    // 控制分页
    handleCurrentChange(val) {
      this.page.page = val;
      this.list();
    },
    // 点击新增目录按钮
    async addbtn() {
      this.flag = true;
      this.subjectShowDialog = true;
      const { data } = await simple();
      this.list2 = data;
      // console.log(this.list2);
    },
    // i点击按钮添加
    async btnOK() {
      try {
        await this.$refs.ruleForms.validate();
        const { data } = this.flag
          ? await add(this.addForm)
          : await update(this.ruleForm);
        this.list();
        console.log(data);
        this.$refs.ruleForms.resetFields();
        this.subjectShowDialog = false;
        this.$message.success(`${this.flag ? "新增" : "修改"}成功`);
      } catch (error) {
        this.$message.error(`${this.flag ? "新增" : "修改"}失败`);
      }
    },
    // 删除
    remove(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          try {
            await remove({ id });
            this.list();
          } catch (error) {
            this.$message.error("删除失败");
          }
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 修改
    async handel(row) {
      this.flag = false;
      this.subjectShowDialog = true;
      const { data } = await simple();
      this.list2 = data;
      // this.ruleForm.id = row.id;
      // this.ruleForm.directoryName = row.directoryName;
    },
    // 清除
    clearSubject() {
      this.page.directoryName = "";
      this.page.state = "";
      this.list();
    },
    // 启用/禁用
    async onstop(row) {
      await changeState({ state: row.state === 1 ? 0 : 1, id: row.id });
      row.state = row.state === 1 ? 0 : 1;
      this.$message.success("启用成功");
    }
  }
};
</script>
<style lang="scss">
.el-pagination__jump {
  margin-left: 0;
}
</style>
